<template>
   <div class="search">
      <el-input clearable @clear="getList" style="width: 260px; margin-right: 5px" v-model="data.name" placeholder="请输入大致内容进行查询" :prefix-icon="Search"></el-input>
      <el-button type="primary" style="margin-left: 15px;" @click="getList">查 询</el-button>
    </div>
   <div class="content">
     <el-table :data="data.tableData" @selection-change="handleSelectionChange" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
      <el-table-column prop="hnyyFeedbackId" width="80" label="序号" ></el-table-column>
      <el-table-column prop="company" label="公司名称" width="100"></el-table-column>
      <el-table-column prop="content" label="内容描述" width="560"></el-table-column>
      <el-table-column prop="module" label="模块" width="60"></el-table-column>
      <el-table-column prop="systemName" label="系统名称" width="80"></el-table-column>
      <el-table-column prop="category" label="分类" width="100"></el-table-column>
      <el-table-column prop="subName" label="提交人名称" width="100"></el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
      <el-table-column prop="url" label="图片" width="200">
        <template #default="{ row }">
          <div style="display: flex; gap: 5px; flex-wrap: wrap;">
            <el-image
              v-for="(img, index) in row.url.split(',')"
              :key="index"
              :src="img"
              :preview-src-list="row.url.split(',')"
              :preview-teleported="true"
              :hide-on-click-modal="false"
              :z-index="3000"
              fit="cover"
              style="width: 50px; height: 50px"
            />

          </div>
        </template>
      </el-table-column>

       <el-table-column label="操作">
          <template #default="scope">
            <template v-if="scope.row.opFlag === '未处理'">
              <el-button type="warning" @click="del(scope.row)">待处理</el-button>
            </template>
          </template>
        </el-table-column>

     </el-table>
     <el-dialog v-model="dialogVisible" title="处理反馈" width="30%">
        <el-form :model="form">
            <el-form-item label="反馈说明">
            <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入处理说明"
                rows="4"
                maxlength="200"
                show-word-limit
            />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmProcess">确定</el-button>
            </span>
        </template>
        </el-dialog>


   </div>
   <div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-size="data.pageSize"
          layout="total,sizes, prev, pager, next"
          :total="data.total"
          :page-sizes="[5, 10, 20, 40, 80]"
          @current-change="getList"
          @size-change="getList"
      />
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue';
import request from '@/utils/request';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';

const dialogVisible = ref(false);
const companyMap = {
  '100': '湖南公司',
  '105': '湖南生物公司',
  '110': '湘西公司',
  '115': '怀化公司',
  '120': '益阳公司',
  '125': '岳阳公司',
  '130': '衡阳公司',
  '135': '邵阳公司',
};

const data=reactive({
  tableData: [],
  pageNum: 1,
  pageSize: 20,
  total: 0,
  name:'', // 搜索条件

})
const form=reactive({
  remark:''
})
let dataForm=reactive({});
// 处理
const del=(row)=>{
    dialogVisible.value = true;
    console.log('row',row)
    row.remark= form.remark;
    console.log('row1231',row)
    dataForm = row;
}

// 处理提交
const confirmProcess=()=>{
  if(!form.remark){
    ElMessage.error('请输入处理说明')
    return
  }
  dataForm.createTime = dayjs(dataForm.createTime).format('YYYY-MM-DDTHH:mm:ss');
  dataForm.remarks = form.remark;
  console.log('dataForm',dataForm)

  request.post('/feedback/update',dataForm).then(res => {
    if (res.code === 200) {
      ElMessage.success('处理成功');
      dialogVisible.value = false;
      form.remark = '';
      getList();
    } else {
      ElMessage.error(res.msg || '处理失败');
    }
  });
}

const getList = () => {
  request.get('/feedback/getfeedback',{
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name,
      type: 1
    }
  }).then(res => {
    console.log('res',res)
    if (res.code === 200) {
       const processedList = res.data.list.map(item => {
        return {
          ...item,
          company: companyMap[item.company] || item.company,
          createTime: new Date(item.createTime).toLocaleString(),
          opFlag: item.opFlag === '1' ? '已处理' : '未处理',
        };
      });
      data.tableData = processedList;
      data.total = res.data.total;
    } else {
      ElMessage.error(res.msg || '获取数据失败');
    }
  });
};
getList()
</script>
<style scoped>
.search{
  margin-bottom: 20px;
}
</style>
